<script setup lang="ts">
import { ref, shallowRef, onMounted, defineAsyncComponent } from 'vue'

const AnnualSales = defineAsyncComponent(() => import('@/pages/dashboard/analysis-h5/components/annual-sales.vue'))
const AnnualProcurement = defineAsyncComponent(() => import('@/pages/dashboard/analysis-h5/components/annual-procurement.vue'))
const AnnualSalesVehicles = defineAsyncComponent(() => import('@/pages/dashboard/analysis-h5/components/annual-sales-vehicles.vue'))
const AnnualProcurementVehicles = defineAsyncComponent(() => import('@/pages/dashboard/analysis-h5/components/annual-procurement-vehicles.vue'))
const AnnualSalesCustomer = defineAsyncComponent(() => import('@/pages/dashboard/analysis-h5/components/annual-sales-customer.vue'))
const AnnualProcurementCustomer = defineAsyncComponent(() => import('@/pages/dashboard/analysis-h5/components/annual-procurement-customer.vue'))

defineOptions({
  name: 'Analysis',
})

const loading = shallowRef(false)

onMounted(() => {
  // 当前分析页统一使用 H5 组件，已做响应式适配
})
const yearId = ref(2024)
</script>

<template>
  <div class="analysis-page">
    <a-space class="mb-16" align="center">
      <span>年份</span>
      <a-select v-model:value="yearId" style="width: 120px">
        <a-select-option :value="2021">2021</a-select-option>
        <a-select-option :value="2022">2022</a-select-option>
        <a-select-option :value="2023">2023</a-select-option>
        <a-select-option :value="2024">2024</a-select-option>
        <a-select-option :value="2025">2025</a-select-option>
      </a-select>
    </a-space>

    <a-row :gutter="[8, 16]">
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
        <a-card :bordered="false" :body-style="{ padding: '0' }">
          <AnnualSales :year-id="yearId" :customer-id="0" />
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
        <a-card :bordered="false" :body-style="{ padding: '0' }">
          <AnnualProcurement :year-id="yearId" :customer-id="0" />
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="[8, 16]">
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
        <a-card :bordered="false" :body-style="{ padding: '0' }">
          <AnnualSalesVehicles :year-id="yearId" :customer-id="0" />
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
        <a-card :bordered="false" :body-style="{ padding: '0' }">
          <AnnualProcurementVehicles :year-id="yearId" :customer-id="0" />
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="[8, 16]">
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
        <a-card :bordered="false" :body-style="{ padding: '0' }">
          <AnnualSalesCustomer :year-id="yearId" :customer-id="0" />
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12">
        <a-card :bordered="false" :body-style="{ padding: '0' }">
          <AnnualProcurementCustomer :year-id="yearId" :customer-id="0" />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
.analysis-page {
  padding: 16px;
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
.mb-16 {
  margin-bottom: 16px;
}
@media (max-width: 480px) {
  .analysis-page {
    padding: 8px;
  }
  .mb-16 {
    margin-bottom: 12px;
  }
}
</style>
